/**
author: sailing
date: 2016/11/21
****/
<style lang='less'>
.toolbar {
  position: absolute;
  margin-left:5px;
  transition:left 1s ease 0s;
  height:40px;
  margin-top:5px;
  z-index:10000;
  line-height:40px;
  .liList{
    .liHeight{
      display:flex;
      margin-right:5px;
    }
  }
}
</style>

<template>
  <div class='toolbar' v-bind:style="{left: left + 'px'}">

     <ul style='display:inline-block' v-show='dTopo'>
      <li class='liHeight'>
        <el-button size="small" @click='changeDT' type="primary" >{{text}}</el-button>
      </li>
    </ul>
    <ul style='display:inline-block' class='liList' v-show="cfig.topoD != 'yes'">
      <li class='liHeight'>
        <el-button style="display:block" size="small" @click='refreshAllNodes' type="primary" >刷新</el-button>
        <el-button style="" size="small" @click='changeIpLabel' type="primary" >名称/IP</el-button>
        <el-button v-show="true" size="small" @click='excepPort' type="primary" >异常端口</el-button>
        <el-button size="small" @click='fullScreen' type="primary" >全屏</el-button>
        <el-button size="small" @click='hideD' type="primary" >{{dStatus ? "显示配线架" : "隐藏配线架"}}</el-button>
        <el-button size="small" @click='save' type="primary" >保存</el-button>
        <el-button v-show="false" size="small" @click='showTable' type="primary" >关联业务</el-button>
        <el-button size="small" type="primary" @click="targetLine()" >{{lineName}}</el-button>
      </li>
      </li>
    </ul>
  </div>
</template>
<script>
import Vue from 'vue'
import eventBus from '../eventBus'
import Config from '../server/config'
import drawTopo from "../server/drawTopo"
import dataJson from '../server/data'
import dLabelIp from "../server/disLabelIp"
export default {
  data () {
    return {
      left: 0,
      input5: '1',
      flag: true,
      cfig: Config,
      dStatus: false,
      text: '拓扑推演',
      lineName: "合并/分开",
      dTopo: false,
      listText: [{
        src: '../static/assets/icon/server.png',
        text: '关联服务器7台'
      }, {
        src: '../static/assets/icon/storage.png',
        text: '关联存储设备0台'
      }, {
        src: '../static/assets/icon/switch.png',
        text: '关联交换机设备'
      }, {
        src: '../static/assets/icon/router.png',
        text: '关联网络设备'
      }, {
        src: '../static/assets/icon/safety.png',
        text: '关联安全设备'
      }]
    }
  },
  methods: {
    clickBnt () {
      eventBus.bus.$emit('getPortData')
    },
    shortPath () {
      eventBus.bus.$emit('shortPath')
    },
    clearSelect () {
      eventBus.bus.$emit('clearSelect')
    },
    save () {
      eventBus.bus.$emit('save_topo')
    },
    excepPort () {
      eventBus.bus.$emit('excepPort')
    },
    targetLine () {
      if(Config.lineStyle == 'bezier') {
        Config.lineStyle = 'haystack'
      }else {
        Config.lineStyle = 'bezier'
      }
       dataJson.cy.style()
        .selector('edge')
        .style({
          'curve-style': Config.lineStyle
        })
        .update()
    },
    fullScreen () {
      var element = document.getElementById('app')
      element.webkitRequestFullScreen()
    },
    refreshAllNodes () {
      eventBus.bus.$emit('refreshAllNodes', {dStatus: this.dStatus})
    },
    changeIpLabel () {
      dLabelIp.change()
    },
    showTable () {
      eventBus.bus.$emit('yTopo_panel')
    },
    hideAllBnt () {
      this.flag = false
      this.dTopo = true
      // this.text = '配线架拓扑'
      this.text = '拓扑推演'
      parent.window.document.getElementById('tuopoIframe').innerHTML = '配线架拓扑'
    },
    clickLeft () {
      this.flag ? this.flag = false : this.flag = true
      this.flag ? this.left = 180 : this.left = 0
      eventBus.bus.$emit('leftClose', {flag: this.flag})
    },

    changeDT__ () {

    },

    changeDT () {
      // this.flag ? this.flag = false : this.flag = true
      if (Config.topoD == 'yes') {
        this.flag = false
        this.text = '配线架拓扑'
        Config.topoD = 'no'
        drawTopo.draw()
        // eventBus.bus.$emit('changeDT')
        // console.log("topo yyyyyyyyyyyyyyyyyyyyyyyyyy:", Config.topoD)
        parent.window.document.getElementById('tuopoIframe').innerHTML = "拓扑推演"
      } else {
        this.flag = true
        this.text = '拓扑推演'
        Config.topoD = 'yes'
        eventBus.bus.$emit('changeDT')
        // console.log("topo nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn:", Config.topoD)
        parent.window.document.getElementById('tuopoIframe').innerHTML = '配线架拓扑'
      }
     
      // Config.topoD === 'yes' ? Config.topoD = 'no' : Config.topoD = 'yes'
      
      
    },

    hideD () {
      if (this.dStatus) {
        this.dStatus = false
      } else {
        this.dStatus = true
      }
      Config.dStatus = this.dStatus
      eventBus.bus.$emit('hideDistribution', {dStatus: this.dStatus})
      
    }
  },
  mounted: function () {
    eventBus.bus.$on('hideAllBnt', this.hideAllBnt.bind(this))
  }
}
</script>
